<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置 - 牛津自然拼读学习应用</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>牛津自然拼读学习应用</h1>
        </header>
        
        <main>
            <div class="settings-section">
                <h2>考试设置</h2>
                
                <form id="quiz-settings-form">
                    <div class="form-group">
                        <label>选择题型：</label>
                        <div>
                            <button type="button" class="btn-small" onclick="selectAllQuizTypes()">全选</button>
                            <button type="button" class="btn-small" onclick="deselectAllQuizTypes()">清空</button>
                        </div>
                        <div class="checkbox-group">
                            <label><input type="checkbox" name="quiz-type" value="word-image" checked> <span class="quiz-type-icon word-image"></span>看词选图</label>
                            <label><input type="checkbox" name="quiz-type" value="image-word" checked> <span class="quiz-type-icon image-word"></span>看图选词</label>
                            <label><input type="checkbox" name="quiz-type" value="word-audio" checked> <span class="quiz-type-icon word-audio"></span>看词选音</label>
                            <label><input type="checkbox" name="quiz-type" value="audio-word" checked> <span class="quiz-type-icon audio-word"></span>听音选词</label>
                            <label><input type="checkbox" name="quiz-type" value="image-audio" checked> <span class="quiz-type-icon image-audio"></span>看图选音</label>
                            <label><input type="checkbox" name="quiz-type" value="audio-image" checked> <span class="quiz-type-icon audio-image"></span>听音选图</label>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>考查范围：</label>
                        <div class="range-selector">
                            <div class="level-selector">
                                <h3>Level 选择</h3>
                                <button type="button" class="btn-small" onclick="selectAllLevels()">全选</button>
                                <button type="button" class="btn-small" onclick="deselectAllLevels()">清空</button>
                                <div id="level-checkboxes">
                                    <!-- Level复选框将通过JavaScript动态生成 -->
                                </div>
                            </div>
                            
                            <div class="unit-selector">
                                <h3>Unit 选择</h3>
                                <button type="button" class="btn-small" onclick="selectAllUnits()">全选</button>
                                <button type="button" class="btn-small" onclick="deselectAllUnits()">清空</button>
                                <div id="unit-checkboxes">
                                    <!-- Unit复选框将通过JavaScript动态生成 -->
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="question-count">题目数量：</label>
                        <select id="question-count" name="question-count">
                            <option value="5">5题</option>
                            <option value="10" selected>10题</option>
                            <option value="15">15题</option>
                            <option value="20">20题</option>
                            <option value="all">全部</option>
                        </select>
                    </div>
                    
                    <div class="form-actions">
                        <button type="button" class="btn-secondary" onclick="history.back()">返回</button>
                        <button type="submit" class="btn-primary">开始考试</button>
                    </div>
                </form>
            </div>
        </main>
        
        <footer>
            <p>&copy; 2025 牛津自然拼读学习应用</p>
        </footer>
    </div>
    
    <script src="/static/js/settings.js"></script>
</body>
</html>